<template>
	<view class="page-container">
		<!-- 时间卡片 -->
		<view class="time-card">
			<view class="time-header">
				<text class="time-label">当前时间</text>
			</view>
			<view class="time-content">
				<text class="time-text">{{ currentTime }}</text>
			</view>
		</view>

		<!-- 营业额统计卡片 -->
		<view class="stat-card">
			<view class="card-header">
				<text class="card-title">营业额统计</text>
			</view>

			<view class="stat-list">
				<!-- 总收入 -->
				<view class="stat-row">
					<text class="stat-label">总收入</text>
					<text class="stat-value total-amount">¥{{ revenueData.totalReceivable.toFixed(2) }}</text>
				</view>

				<!-- 微信 -->
				<view class="stat-row">
					<text class="stat-label">微信</text>
					<text class="stat-value">¥{{ revenueData.wechatReceived.toFixed(2) }}</text>
				</view>

				<!-- 支付宝 -->
				<view class="stat-row">
					<text class="stat-label">支付宝</text>
					<text class="stat-value">¥{{ revenueData.alipayReceived.toFixed(2) }}</text>
				</view>

				<!-- 现金 -->
				<view class="stat-row">
					<text class="stat-label">现金</text>
					<text class="stat-value">¥{{ revenueData.cashReceivable.toFixed(2) }}</text>
				</view>

				<!-- 银联 -->
				<view class="stat-row">
					<text class="stat-label">银联</text>
					<text class="stat-value">¥{{ revenueData.unionPayReceivable.toFixed(2) }}</text>
				</view>

				<!-- 其他 -->
				<view class="stat-row">
					<text class="stat-label">其他</text>
					<text class="stat-value">¥{{ revenueData.otherReceivable.toFixed(2) }}</text>
				</view>
			</view>
		</view>

		<!-- 实收信息卡片 -->
		<view class="input-card">
			<view class="card-header">
				<text class="card-title">实收信息</text>
				<text class="card-subtitle">请核对实际收到的金额</text>
			</view>

			<view class="input-list">
				<!-- 现金实收 -->
				<view class="input-row">
					<view class="input-label-container">
						<text class="input-label">现金实收</text>
						<text class="currency-symbol">¥</text>
					</view>
					<input class="input-field" placeholder="请输入" placeholder-class="placeholder-text"
						v-model="cashInput" type="digit" />
				</view>

				<!-- 银联实收 -->
				<view class="input-row">
					<view class="input-label-container">
						<text class="input-label">银联实收</text>
						<text class="currency-symbol">¥</text>
					</view>
					<input class="input-field" placeholder="请输入" placeholder-class="placeholder-text"
						v-model="unionInput" type="digit" />
				</view>

				<!-- 其他实收 -->
				<view class="input-row">
					<view class="input-label-container">
						<text class="input-label">其他实收</text>
						<text class="currency-symbol">¥</text>
					</view>
					<input class="input-field" placeholder="请输入" placeholder-class="placeholder-text"
						v-model="otherInput" type="digit" />
				</view>
			</view>
		</view>

		<!-- 打卡按钮 -->
		<view class="button-container">
			<button class="checkout-btn" @click="handleCheckout">
				<text class="btn-text">确认下班打卡</text>
			</button>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/request.js'

	export default {
		data() {
			return {
				cashInput: '0',
				unionInput: '0',
				otherInput: '0',
				currentTime: '',
				timer: null,
				// 营收数据
				revenueData: {
					shiftVerificationNo: '',
					totalReceivable: 0,
					wechatReceived: 0,
					alipayReceived: 0,
					cashReceivable: 0,
					unionPayReceivable: 0,
					otherReceivable: 0
				}
			}
		},
		onLoad() {
			// 初始化时间
			this.updateTime()
			// 设置定时器每秒更新时间
			this.timer = setInterval(() => {
				this.updateTime()
			}, 1000)

			// 获取营收数据
			this.fetchRevenueData()
		},

		onUnload() {
			// 清除定时器
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('title.offWord')
			});
		},
		methods: {
			// 获取营收统计数据
			async fetchRevenueData() {
				try {
					const data = await this.$http.post('/shiftVerification/getMobileTurnoverStatistics')
					this.revenueData = data
					console.log('营收数据:', data)
				} catch (error) {
					console.error('获取营收数据失败:', error)
					uni.showToast({
						title: '获取营收数据失败',
						icon: 'none'
					})
				}
			},
			updateTime() {
				const now = new Date()
				const year = now.getFullYear()
				const month = String(now.getMonth() + 1).padStart(2, '0')
				const day = String(now.getDate()).padStart(2, '0')
				const hours = String(now.getHours()).padStart(2, '0')
				const minutes = String(now.getMinutes()).padStart(2, '0')
				const seconds = String(now.getSeconds()).padStart(2, '0')

				this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},
			async handleCheckout() {
				const shiftVerificationNo = uni.getStorageSync('shiftVerificationNo'); //交班核实编码 用于下班接口参数
				try {
					const data = await this.$http.post('/shiftVerification/punchOut', {
						shiftVerificationNo: shiftVerificationNo,
						businessTerminalType: 'mobileService',
						shiftEnd: this.currentTime,
						cashReceived: this.cashInput,
						unionPayReceived: this.unionInput,
						otherReceived: this.otherInput
					})
					if (data) {
						uni.showToast({
							title: '打卡下班成功',
							icon: 'success'
						})
						uni.removeStorageSync('shiftVerificationNo'); //下班成功后清除上班标识
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					} else {
						uni.showToast({
							title: '打卡下班失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('打卡下班失败:', error)
					uni.showToast({
						title: '打卡下班失败',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style scoped>
	/* 页面容器 */
	.page-container {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	/* 时间卡片 */
	.time-card {
		background: linear-gradient(135deg, #d6491e 0%, #f33100 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		color: white;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.time-header {
		margin-bottom: 15rpx;
	}

	.time-label {
		font-size: 28rpx;
		opacity: 0.9;
	}

	.time-content {
		text-align: center;
	}

	.time-text {
		font-size: 44rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	/* 通用卡片样式 */
	.stat-card,
	.input-card {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		margin-bottom: 25rpx;
	}

	.card-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 8rpx;
	}

	.card-subtitle {
		font-size: 24rpx;
		color: #999;
	}

	/* 统计列表样式 */
	.stat-list {
		width: 100%;
	}

	.stat-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0;
		border-bottom: 1px solid #f0f0f0;
		transition: all 0.3s ease;
	}

	.stat-row:hover {
		background-color: #fafafa;
		padding-left: 10rpx;
	}

	.stat-row:last-child {
		border-bottom: none;
	}

	.stat-label {
		font-size: 30rpx;
		color: #666;
	}

	.stat-value {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.total-amount {
		font-size: 36rpx;
		font-weight: bold;
		color: #07c160;
	}

	/* 输入区域样式 */
	.input-list {
		width: 100%;
	}

	.input-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0;
		border-bottom: 1px solid #f0f0f0;
		position: relative;
	}

	.input-row:last-child {
		border-bottom: none;
	}

	.input-label-container {
		display: flex;
		align-items: center;
	}

	.input-label {
		font-size: 30rpx;
		color: #333;
	}

	.currency-symbol {
		margin-left: 8rpx;
		font-size: 28rpx;
		color: #999;
	}

	.input-field {
		font-size: 32rpx;
		color: #333;
		text-align: right;
		width: 250rpx;
		height: 60rpx;
		padding: 0 10rpx;
		margin: 0;
		border: 1px solid #e0e0e0;
		border-radius: 8rpx;
		background-color: #fafafa;
	}

	.input-field:focus {
		border-color: #4facfe;
		background-color: #ffffff;
		box-shadow: 0 0 0 2rpx rgba(79, 172, 254, 0.1);
	}

	.placeholder-text {
		color: #cccccc;
		font-size: 30rpx;
	}

	/* 按钮样式 */
	.button-container {
		padding: 20rpx 0 40rpx;
		margin-top: 10rpx;
	}

	.checkout-btn {
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		background: linear-gradient(135deg, #07c160 0%, #00b42a 100%);
		color: #ffffff;
		font-size: 36rpx;
		border-radius: 52rpx;
		text-align: center;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
		transition: all 0.3s ease;
	}

	.checkout-btn:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.2);
	}

	.btn-text {
		font-weight: 600;
		letter-spacing: 2rpx;
	}

	/* 响应式调整 */
	@media screen and (min-width: 768px) {
		.page-container {
			max-width: 600rpx;
			margin: 0 auto;
		}
	}
</style>